
   <template>
  <div class="app-container">
    <div class="clearfix" style="width:100%;padding-right:30px;">
      <p style="color:#303133;margin:0;" class="left">部门数据概览</p>
      <el-dropdown class="right" size="medium" @command="handleCommand">
        <span class="el-dropdown-link">{{deptName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item :command="item" v-for="item in departList" :key="item.id"> {{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <panel-group :basicData="studyTimeData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="studyCourseData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="userData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="studyCompleteData"></panel-group>
      </el-col>
     
    </el-row>
    <div class="studyTime-container mag30 content">
      <el-row class="nav-container">
        <el-col :span="10">
          <span
            class="nav-title"
            :class=" statisType== 'time'?'is-active':''"
            @click="changeStatisType('time')"
          >学习时长</span>
          <span
            class="nav-title"
            :class=" statisType== 'user'?'is-active':''"
            @click="changeStatisType('user')"
          >学习人数</span>
        </el-col>
        <el-col :span="7">
          <span
            v-for="item in dateArray"
            :key="item.name"
            class="nav-title"
            :class="item.value == statisticsTimeData.timeType?'is-active':''"
            @click="changeTimeType(item)"
          >{{item.name}}</span>
        </el-col>
        <el-col :span="7" style="padding-top:10px;">
          <el-date-picker
            v-model="dateScope"
            :unlink-panels="true"
            size="medium"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTimeArray"
          ></el-date-picker>
        </el-col>
      </el-row>
    </div>
    <el-row class="content">
      <el-col :span="17" style="padding:20px;">
        <bar-chart
          :xAxisData="barChartXAxisData"
          :chartData="barChartData"
          :data-name="studyStatisData.dataName"
          :yAname="studyStatisData.yAname"
          :xRotate= "50"
          width="90%"
        ></bar-chart>
      </el-col>
      <el-col :span="7">
        <p>学习排行</p>
        <ul class="ranking">
          <li class="clearfix" v-for="(item,index) in ranking" :key="index" v-show="index<9">
            <span class="ranking-num left" :class="index<3?'ranking-after':''">{{index+1}}</span>
            <span class="ranking-name left">{{item.userName}}</span>
            <span class="ranking-time right">{{item.studyTime}}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="mag30 department-container content" v-show="departmentArray.length>0">
       <span style="font-size:16px;position:absolute;top:1px;left:20px;">部门完成率</span>
      <i class="el-icon-arrow-left" v-show="departmentArray.length>5" @click="getMinDepart"></i>
      <ul class="clearfix">
        <li
          class="left"
          v-for="(item,index) in departmentArray"
          :key="item.name"
          v-show="index>=departRange.minIndex&&index<=departRange.maxIndex"
        >
          <p class="department-name">{{item.name}}</p>
          <div class="clearfix percentage-container">
            <div class="left">
              <p class="title">课程完成率</p>
              <p class="percentage">{{item.completionRatio}}%</p>
            </div>
            <div class="left">
              <el-progress type="circle" :percentage="Number(item.completionRatio)" :width="100"></el-progress>
            </div>
          </div>
        </li>
      </ul>
      <i class="el-icon-arrow-right" v-show="departmentArray.length>5" @click="getMaxDepart"></i>
    </div>
    <div class="mag30 footer-container">
      <div class="content">
        <div class="title-container">
          <p class="title">课程关注排行</p>
        </div>
        <el-table :data="courserRanking" style="width: 100%;padding:0 20px;">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column prop="name" label="课程名字"></el-table-column>
          <el-table-column prop="attention" label="用户数"></el-table-column>
        </el-table>
      </div>
      <div class="content">
        <div class="title-container">
          <p class="title">学习数据占比</p>
          <el-radio-group v-model="studyType" style="width:80%" @change="changeStudyDateType">
            <el-radio-button label="课程"></el-radio-button>
           <!--  <el-radio-button label="考试"></el-radio-button> -->
          </el-radio-group>
        </div>
        <div style="width: 100%;padding:0 20px;">
          <piedoughnut-chart :title="pieTitle" :legendData="legendData" :seriesData="seriesData"></piedoughnut-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import moment from "moment/moment";
import { timeForMat, safariDate, getMomentValue } from "@/utils/index";
import {
  getCardList,
  getStudyTotalTime,
  getStudyTotalCourse,
  getUserNum,
  getStudyCompletionRatio,
  getStudyStatisticsByTime,
  getStudyUsersByTime,
  getLearningRanking,
  getCourseData,
  getStudyFinishData
} from "@/api/dashboard";
import { getComanyId } from "@/utils/auth";
import BarChart from "@/components/Echarts/BarChart";
import PanelGroup from "@/components/Echarts/PanelGroup";
import PiedoughnutChart from "@/components/Echarts/PieDoughnutChart";
export default {
  name: "department",
  components: {
    PanelGroup,
    BarChart,
    PiedoughnutChart
  },
  computed: {},
  data() {
    return {
      studyTimeData: {
        icon: "clock2",
        text: "今日学习时长",
        value: 0,
        explain: "小时"
      },
      studyCourseData: {
        icon: "play",
        text: "学习课程数",
        value: 0
      },
      userData: {
        icon: "peoples",
        text: "人员数",
        value: 0
      },
      studyCompleteData: {
        icon: "stats-bars",
        text: "学习完成率",
        value: 0,
        explain: "%"
      },
      departList: [],//部门列表
      deptName: "",
      dateArray: [
        {
          name: "今日",
          value: "1"
        },
        {
          name: "本周",
          value: "2"
        },
        {
          name: "本月",
          value: "3"
        },
        {
          name: "全年",
          value: "4"
        }
      ],
      studyStatisData: {
        //学习数据chart 数据对象
        dataName: "学习时长/分钟",
        xAname: "时间",
        yAname: "分钟"
      },
      statisType: "time", //数据类型（学习时长、学习人数）
      ranking: [], //统计数组
      departmentArray: [ ], //部门数组
      departRange: {
        //部门范围
        minIndex: 0,
        maxIndex: 4
      }, //部门范围
      courserRanking: [],
      statisticsTimeData: {
        //学习时间 学习人数接口参数
        deptId: "",
        timeType: "2",
        startTime: "",
        endTime: ""
      },
      studyType: "课程",
      dateScope: [], //日期范围
      finishData: {
        studyType: 1,
        deptId: "",
        orgType: 2
      },
      pieTitle: "课程完成情况",
      legendData: [],
      seriesData: [],
      barChartXAxisData: [
        //横轴
      ], //时段数据
      barChartData: []
    };
  },
  created() {
    let storage = window.localStorage;
    let departList = JSON.parse(storage.getItem('deptList'));
    this.departList = [...departList];
     this.deptName =  departList[0].name;
    this.statisticsTimeData.deptId = departList[0].id; 
    this.finishData.deptId = departList[0].id;
    this.initData(departList[0].id);
  },
  methods: {
    async initData(id) {
      let departData = { deptId: id };
      let studyTotalTime = await getStudyTotalTime(departData);
      let studyTotalCourse = await getStudyTotalCourse(departData);
      let userNum = await getUserNum(departData);
      let studyCompletionRatio = await getStudyCompletionRatio({
        orgType: 2,
        ...departData
      });
      let deptCompletionRatio = await getStudyCompletionRatio({
        orgType: 2,
        ...departData
      });
      let statisticsByTime = await this.getStudyStatisticsByTime(
        this.statisticsTimeData
      );
      let getLearningRanking = await this.getLearningRanking();
      let courseData = await getCourseData();
      let finishData = await this.getStudyFinishData("课程");
      this.studyTimeData.value = studyTotalTime.entity
        ? studyTotalTime.entity.totalStudyTime
        : 0;
      this.studyCourseData.value = studyTotalCourse.entity
        ? studyTotalCourse.entity.courseNum
        : 0;
      this.userData.value = userNum.entity ? userNum.entity.userNum : 0;
      this.studyCompleteData.value = studyCompletionRatio.entity.length>0
        ? studyCompletionRatio.entity[0].completionRatio
        : 0;
      this.departmentArray = [...deptCompletionRatio.entity];
      this.courserRanking = [...courseData.entity];
    },
    getStudyStatisticsByTime(data) {
      getStudyStatisticsByTime(data).then(res => {
        let entity = res.entity;
        this.barChartXAxisData = [];
         if(this.statisticsTimeData.timeType !='4'){
           entity.time.forEach(item => {
            this.barChartXAxisData.push(moment(item).format("MM-DD"));
          });
        }else{
           this.barChartXAxisData = entity.time;
        }
        this.barChartData = entity.data;
        this.studyStatisData = {
          //学习数据chart 数据对象
          dataName: "学习时长/分钟",
          xAname: "时间",
          yAname: "分钟"
        };
      });
    },
    getStudyUsersByTime(data) {
      getStudyUsersByTime(data).then(res => {
        let entity = res.entity;
        this.barChartXAxisData = [];
        if(this.statisticsTimeData.timeType !='4'){
           entity.time.forEach(item => {
            this.barChartXAxisData.push(moment(item).format("MM-DD"));
          });
        }else{
           this.barChartXAxisData = entity.time;
        }
        
        this.barChartData = entity.data;
        this.studyStatisData = {
          //学习数据chart 数据对象
          dataName: "学习人数",
          xAname: "时间",
          yAname: "人"
        };
      });
    },
    getLearningRanking() {
      getLearningRanking({ orgType: 2, ...this.statisticsTimeData }).then(
        res => {
          this.ranking = [...res.entity];
        }
      );
    },
    getStudyFinishData(type) {
      switch (type) {
        case "课程 ":
          this.finishData.studyType = 1;
          break;
        case "考试":
          this.finishData.studyType = 2;
          break;
        default:
          break;
      }
      getStudyFinishData(this.finishData).then(res => {
        this.legendData = [];
        let entity = res.entity;
        this.seriesData = [...entity];
        entity.forEach(item => {
          this.legendData.push(item.name);
        });
      });
    },
    handleCommand(command) {
      //切换部门
      this.deptName = command.name;
      this.initData(command.id);
    },
    getStudyStatisticsType() {
      //判断请求不同数据数据
      if (this.statisType == "time") {
        this.getStudyStatisticsByTime(this.statisticsTimeData);
      } else {
        this.getStudyUsersByTime(this.statisticsTimeData);
      }
    },
    changeTimeType(item) {
      this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.dateScope = [];
      this.statisticsTimeData.timeType = item.value;
      this.getStudyStatisticsType();
      this.getLearningRanking();
    },
    getTimeArray() {
      this.statisticsTimeData.timeType = "";
      this.statisticsTimeData.startTime = getMomentValue(this.dateScope[0]);
      this.statisticsTimeData.endTime = getMomentValue(this.dateScope[1]);
      this.getStudyStatisticsType();
      this.getLearningRanking();
    },

    changeStatisType(type) {
      this.statisticsTimeData.timeType = "1";
      this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.statisType = type;
      this.getStudyStatisticsType();
    },
    changeStudyDateType(data) {
      this.getStudyFinishData(data);
    },
    getMinDepart() {
      let minIndex = this.departRange.minIndex;
      let maxIndex = this.departRange.maxIndex;
      if (minIndex > 0) {
        this.departRange.minIndex--;
        this.departRange.maxIndex--;
      } else {
        Message.info({
          message: "没有更多了"
        });
      }
    },
    getMaxDepart() {
      let minIndex = this.departRange.minIndex;
      let maxIndex = this.departRange.maxIndex;
      if (maxIndex < this.departmentArray.length - 1) {
        this.departRange.minIndex++;
        this.departRange.maxIndex++;
      } else {
        Message.info({
          message: "没有更多了"
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/studyStatistics.scss";
.card-data {
  height: 108px;
  margin-top: 18px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  padding: 10px;
}
</style>
